<template>
    <div class="tags-box">
        <div class="tags-bg" id="tags-bg" v-show="popup"  @click="isShowSelectList($event,'search')"></div>
        <div class="tags-input">
            <div class="tags-input-box">
                <div class="select-title-icon">
                    <img src="/img/home/statistic/screen.png" class="icon">
                </div>
                <div class="input field is-grouped" style="margin-bottom:0" @click="inputfocus('search')">
                    <div :class="{'control-box' : selected.length}">
                        <div class="control" v-for="(item,index) in selected" v-on:click.stop="">
                            <div class="tags has-addons is-medium">
                                <span class="tag is-link">
                                    {{ item.name }}
                                </span>
                                <a v-on:click="move(item,false);" class="tag is-delete">X</a>
                            </div>
                        </div>
                        <div class="input-box" v-on:click.stop="">
                            <input id="search" @click="inputfocus('search',$event)" class="l-input" type="search" name="search" v-model="keyWords" placeholder="经销点筛选" @keyup="query($event,keyWords)"/>
                        </div>
                    </div>
                </div>

                <div class="select-icon" @click="isShowSelectList($event,'search')">
                    <img src="/img/home/statistic/open.png" id="icon-down" class="icon icon-down" data-target="false">
                </div>
            </div>
            <ul class="is-hoverable" v-show="popup">
                <li v-for="tag in selectList" v-on:click="move(tag,true);popup=false;">
                    {{ tag.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
  // import $ from "jquery";
  export default {
    data() {
        return {
            popup: false,
            selectList:[],//筛选列表
            selected: [],
            keyWords:'',
            selectedCityList: [],
            addOrDelFun: {}
        }
    },
    props: ['locations', 'selectedMax'],
    watch: {
        keyWords(val,oldVal) {
            if(val == '') {
                // this.searchList == this.unique(this.locations,this.selected);
            }
        }
    },
    created() {
    },
    computed:{
    },
    methods: {
        move(item, tORf) {
            var _this = this;
            var fromList = tORf ? _this.selectList : _this.selected;
            var toList = tORf ? _this.selected : _this.selectList;
            if (!tORf || toList.length < _this.selectedMax) {
                if (tORf) {
                    fromList.splice(fromList.indexOf(item), 1);
                    toList.push(item);
                    _this.selectedCityList.push(item.id);

                }else {
                    fromList.splice(fromList.indexOf(item), 1);
                    toList.push(item);
                    _this.selectedCityList = _this.arrRemove(item.id,_this.selectedCityList);
                    // _this.selectedCityList.remove(item.id);
                }
            }else {
                layer.msg('最多只能选择'+ _this.selectedMax +'个经销点')
            }
            var cityListJson = _this.changedStr(_this.selectedCityList);
            _this.$emit('cityIds', cityListJson);
            _this.popup = false;
            _this.keyWords = '';
            _this.isChangeIcon();
        },
        isChangeIcon () {
            // if($('#icon-down').attr('data-target') == 'false') {
            if( this.popup == true) {
                // $('#icon-down').attr('data-target','true');
                $('#icon-down').addClass('rotate-180');
            }else {
                // $('#icon-down').attr('data-target','false');
                $('#icon-down').removeClass('rotate-180');
            }
        },
        inputfocus(el,event) {
            var _this = this;
            document.getElementById(el).focus();
            _this.popup = true;
            // $('#icon-down').attr('data-target','true');
            $('#icon-down').addClass('rotate-180');
            if(_this.keyWords == '') {
                _this.selectList = _this.unique(_this.locations,_this.selected);
            }
        },
        isShowSelectList(event,el) {
            var _this = this;
            _this.popup = !_this.popup ? true :false;
            document.getElementById(el).blur();
            _this.selectList = _this.unique(_this.locations,_this.selected);
            _this.isChangeIcon();
        },
        query(event,keyWords) {
            var _this = this;
            var list = [];
            if(keyWords != '') {
                _this.selectList = _this.unique(_this.locations,_this.selected);
                let i = 0;
                let len = _this.selectList.length;
                for(;i<len;i++){
                    // _this.selectList[i].name.indexOf(keyWords);
                    if(_this.selectList[i].name.indexOf(keyWords) !== -1){
                        // _this.popup = true;
                        list.push(_this.selectList[i]);
                    }
                }
                _this.selectList = list;
            }else {
                if(_this.selected.length > 0) {
                    _this.selectList = _this.unique(_this.locations,_this.selected);
                }else {
                    _this.selectList = _this.locations;
                }
            }
        },
        //两个数组 去重
        unique(oldList,selectedList){
            var newArr = [];
            var _this = this;
            for(var i=0; i < oldList.length; i++){
                var repeat = false;
                for(var j=0; j < selectedList.length; j++){
                    if(oldList[i].id == selectedList[j].id){
                        repeat = true;
                        break;
                    }
                }
                if(!repeat){
                    newArr.push(oldList[i]);
                }
            }
            return newArr;
        },
        //字条串拼接
        changedStr(arr) {
            return arr.join(",");
        },
        //删除添加搜索列表
        arrIndexOf(val,arr) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == val) return i;
            }
            return -1;
        },
        arrRemove(val,arr) {
            var index = this.arrIndexOf(val,arr);
            if (index > -1) {
                arr.splice(index, 1);
            }
            return arr;
        },
    }
  }
</script>

<style scoped>
    .tags {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        background-color: rgba(32, 160, 255, 0.1);
        color: #019ae8;
        border-width: 1px;
        border-style: solid;
        border-color: #019ae8;
        border-image: initial;
        border-radius: 3px;
        margin-bottom: 5px;
        padding: 3px 0;
    }
    .tags-bg {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.1);
        z-index: 999;
    }
    .tag:not(body).is-delete:after {
        height: 50%;
        width: 1px;
    }
    .tags-box {
        padding: 10px;
        background: #fff;
        margin-bottom: 10px;
    }
    .tags-input {
        position: relative;
        z-index: 999;
    }
    .tags-input-box {
        display: flex;
        background-color: #F3F7FA;
        padding-left: 10px;
        align-items: center;
        border-radius: 3px;
    }
    .tags-input > ul {
        height: 16rem;
        overflow-y: scroll;
        border: 1px solid #ccc;
        position: absolute;
        top: 100%;
        width: 100%;
        z-index: 999;
        background: #fff;
    }
    .tags-input li {
        padding: .25rem 1rem;
    }
    .tags-input li:hover {
        color: white;
        background: #019AE8;
    }

    .input {
        -moz-appearance: none;
        -webkit-appearance: none;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 5px;
        -webkit-box-shadow: none;
        box-shadow: none;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        font-size: 1rem;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        line-height: 1.5;
        padding-bottom: calc(.375em - 1px);
        padding-left: calc(.625em - 1px);
        padding-right: calc(.625em - 1px);
        padding-top: calc(.375em - 1px);
        position: relative;
        vertical-align: top;
        background-color: #F3F7FA;
        border-color: #dbdbdb;
        color: #363636;
        max-width: 100%;
        width: 100%;
        min-height: 36px;
        height: 100%;
        padding: 0;
        flex-wrap: wrap;
    }
    .field:not(:last-child) {
        margin-bottom: .75rem;
    }

    .field.is-grouped {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        position: relative;
        width: 85%;
    }
    .field.is-grouped .control-box {
        padding: 8px;
        padding-bottom: 0;
        padding-left: 0;
        display: flex;
        flex-wrap: wrap;
    }
    .field.is-grouped .control {
        margin-left: 0.5rem;
    }
    .field.is-grouped .control .tag {
        font-size: .75rem;
        padding-left: .75em;
        padding-right: .75em;
        color: #019ae8;
    }
    .l-input{
        border: 0px;
        min-height: 26px;
        padding: 0 8px;
        background: #F3F7FA;
        width:  100px;
    }
    .select-box {
        flex-wrap: wrap;
    }
    .select-title-icon {
        left: 10px; */
        margin-top: 3px;
        line-height: 39px;
    }
    .select-title-icon .icon {
        width: 15px;
    }
    .select-icon {
        margin-top: -3px;
        line-height: 39px;
        padding-right: 10px;
        padding-left: 10px;
        margin-left: 5px;
    }
</style>
